<template>
	
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我要报名</block>
		</cu-custom>
		<view v-for="(item,index) in list.details" :key="index">
			<view v-if="item.fieldOptionsList" ref="options">
				<view class="lsc-diy-field">
					<text>{{item.fieldName}}<text style="color: red;" v-if="item.requiredFlag">*</text></text>
				</view>
				<radio-group @change="getInput" :data-index="index" style="display: block;">
					<label class="cu-form-group" v-for="(ops, idx) in item.fieldOptionsList" :key="idx">
						<view>
							<radio class='blue radio' 
							:value="ops" 
							:checked="(listDetails[index] !== undefined && listDetails[index]['content'] === ops) ? true : (((!listDetails.length || !listDetails[index]['content']) && idx === 0) ? true : false)"/>
						</view>
						<view class="padding-sm text-left" style="width: 100%;">{{ops}}</view>
					</label>
				</radio-group>
			</view>
			<view v-else>
				<view class="lsc-diy-field">
					<text>{{item.fieldName}}<text style="color: red;" v-if="item.requiredFlag">*</text></text>
				</view>
				<view class="cu-form-group">
					<input ref="options" class="options"
							@blur="getInput"
							:data-index="index"
							:placeholder="'请输入' + item.fieldName" name="input" 
							:value="listDetails[index] !== undefined ? listDetails[index]['content'] : ''">
					</input>
				</view>
			</view>
		</view>
		
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)',overflow:'auto'}]">
				<view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in requestList.details" :key="index">
						<view class="content">
							<view>{{item}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <button class="cu-btn bg-blue lg" @tap="keepFiled">keepFiled</button> -->
		<view class="padding"  v-if="isView">
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @tap="saveFiled">{{btnTxt[0]}}</button>
			</view>
		</view>
		<view class="padding" v-else>
			
			<view class="padding-sm flex flex-direction">
				<button class="cu-btn bg-blue lg" @tap="saveFiled">{{btnTxt[0]}}</button>
			</view>
			<view class="padding-sm flex flex-direction">
				<button class="cu-btn bg-gradual-blue lg" @tap="cancleApply">{{btnTxt[1]}}</button>
			</view>
			<view class="padding-sm flex flex-direction">
				<button class="cu-btn bg-cyan lg" @tap="reviewVoucher">{{btnTxt[2]}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '@/config/index';
    import {mapState} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				listDetails: [],
				listValue: [],
				CustomBar: this.CustomBar,
				modalName: null,
				btnTxt: ['保存', '取消报名', '查看凭证'],
				btnIndex: 0,
				isView: false,
				isEdit: false,
				num: 1,
				requestList: {
					activityId: 0, //*	integer($int32) 活动id
					details: [], //	[]
					// activityState: '', //	integer($int32) 活动状态码,0未开始，1进行中，3已结束
					// allowed: 1, //	integer($int32) 是否已经审批:0默认是，1否
					// allowedFlag: false, //	boolean 是否已经审批:0默认是true，1否false
					// applyTime: '', //	string($date-time) 报名时间
					// fee: 0, //	number 报名收到报名费
					// id: 0, //	integer($int32) 报名id
					// remarks: '', //	string 备注
					// wechatId: '', //	string (代)报名微信id
					// wechatNickname: '', //	string (代)报名微信昵称
					// wechatNum: '', //	string (代)报名微信号
				},
				detailsList: {
					activityId: '', //*	integer($int32)活动id
					content: '', //	string字段值
					fieldId: '', //*	integer($int32)字段id
					orderNum: '', //	integer($int32)
				},
				params: {},
				optionsList: []
				
			};
		},
		computed: mapState(['getFieldDetails']),
		onLoad(e) {
			this.params = e
		},
		onReady() {
			this.list = this.getFieldDetails
		},
		onShow() {
			if((this.params.type==='edit' || this.params.type==='only') && this.params.id) {
				this.isView = false
				uni.request({
					url: `${baseUrl}/apply/queryByApplyId`,
					data: {applyId: this.params.id}
				})
				.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res]  = data;
					if(res.data.recode !== '100') {
						uni.showToast({
							icon: 'none',
							title: error,
						});
						return
					}
					this.listValue = res.data.data.apply
					this.listDetails = this.listValue.details
					this.requestList.details.push(...this.listDetails)
				})
			}else {
				this.isView = true
			}
		},
		methods: {
			getInput(e) {
				this.getParams(e)
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			radioChange: function(evt) {
				const index = evt.target.dataset.index
				const Options = this.$refs.options
				Options[index].inputValue = evt.target.value
			},
			keepFiled() {
			},
			getParams(e) {
				let value = e.detail.value;
				let index = e.currentTarget.dataset.index;
				const DetailsId = this.listDetails.length ? this.listDetails[index].id : ''
				const ApplyId = this.params.id*1 || ''
				this.optionsList = []
				this.requestList.activityId = this.list.id || ''
				this.requestList.id = ApplyId
				if(!value) return
				if(!this.params.id) {
					this.requestList.details = this.requestList.details.filter(ele => ele.fieldId !== this.list.details[index].id) //过滤重复值
					this.requestList.details.push({
						activityId : this.list.details[index].activityId, 
						content : value,
						fieldId : this.list.details[index].id,
						orderNum : this.list.details[index].orderNum,
						applyId : ApplyId,
						id : DetailsId
					})
				}else {
					this.requestList.details[index].activityId = this.list.details[index].activityId
					this.requestList.details[index].content = value
					this.requestList.details[index].fieldId = this.list.details[index].id
					this.requestList.details[index].orderNum = this.list.details[index].orderNum
					this.requestList.details[index].applyId = ApplyId
					this.requestList.details[index].id = DetailsId
				}
				this.optionsList.push(this.requestList)
				
				
			},
			saveFiled() {
				// this.getParams()
				if(this.validateList()) {
					uni.showToast({
						icon: 'none',
						title: '请填写报名基础信息',
						duration: 1500
					})
					return
				}
				uni.showLoading({
				    title: '保存中'
				});
				
				uni.request({
					url: `${baseUrl}/apply/save`,
					method: 'POST',
					data: JSON.stringify(this.optionsList),
					success: res => {
						uni.hideLoading()
						setTimeout(function() {
							uni.showToast({
								icon: 'success',
								title: '保存成功',
								duration: 1500,
								success: (res) => {
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}, 10);
					}
				});
			},
			validateList() {
				let Flag = false
				const List =  this.list.details
				const Details = this.requestList.details
				this.optionsList = []
				this.optionsList.push(this.requestList)
				// if(!Details.length) return Flag = true
				List.forEach((ele,index) => {
					if(ele.requiredFlag && Details[index] === undefined) {
						return Flag = true
					}else if(ele.requiredFlag && !Details[index].content) {
						return Flag = true
					}
					// if(ele.requiredFlag && !Details[index].content)
					// 	return Flag = true
				})
				return Flag
			},
			cancleApply() {
				uni.request({
					url: `${baseUrl}/apply/delete`,
					method: 'GET',
					data: {id: this.params.id},
					success: res => {
						uni.hideLoading()
						setTimeout(function() {
							uni.showToast({
								icon: 'success',
								title: '已经取消报名',
								duration: 1500,
								success: (res) => {
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}, 10);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			reviewVoucher() {
				uni.navigateTo({
					url: `/pages/main/enroll/voucher?id=${this.params.id*1}`,
				});
			}
		}
	};
</script>

<style>
	.lsc-diy-field {
		color: #666;
		padding: 18upx 28upx;
	}
	.lsc-diy-picker {
		border: 1px solid #AAAAAA;
		margin: 20upx;
	}
	.lsc-diy-picker-title {
		padding-left: 25upx;
		text-align: left;
		color: #AAAAAA;
	}
	.lsc-diy-tip {
		color: #AAAAAA;
		font-size: 22upx;
		padding: 10px;
	}
</style>
